<template>
  <div class="body">
    <div class="user_info">
      <div class="info">
        <div class="title">用户信息</div>
        <div class="aravat_box">
          <Image
            :src="
              userInfo && userInfo.avatar
                ? userInfo.avatar
                : 'https://thirdwx.qlogo.cn/mmopen/vi_32/keeJw61KK9RaKLdDofT0jibfauCkgNkeIkNI8aDhpVbQ3RTo7P8iaUhMzsDmCkNBE4nsHHJuOoiaKXq9EdAByB9netRBgndkgghnlwjO0wL65I/132'
            "
            class="aravat"
            :width="120"
            :height="120"
          />
        </div>
      </div>

      <div class="detail" v-if="userInfo">
        <div class="ul">
          <div class="li"> 昵称:{{ userInfo.nickName }}</div>
          <div class="li">手机号: {{ userInfo.phone }}</div>
          <div class="li">用户ID: {{ userInfo.id }}</div>
          <div class="li">钱包余额: {{ userInfo.amount }}</div>
          <div class="li">累计提现: {{ userInfo.withdraw }}</div>

          <div class="li">
            学生认证状态：
            <a-select v-model:value="userInfo.isStudent" style="width: 200px">
              <a-select-option :value="1">已认证</a-select-option>
              <a-select-option :value="2">待审核</a-select-option>
              <a-select-option :value="3">未认证</a-select-option>
              <a-select-option :value="0">认证不通过</a-select-option>
            </a-select>
          </div>
          <div class="li">
            用户类型：
            <a-select v-model:value="userInfo.identity" style="width: 200px">
              <a-select-option :value="1">买家</a-select-option>
              <a-select-option :value="2">卖家</a-select-option>
              <a-select-option :value="3">代付会员</a-select-option>
            </a-select>
          </div>
          <div class="li">
            用户身份：
            <a-select v-model:value="userInfo.appRole" style="width: 200px">
              <a-select-option :value="1" :disabled="userInfo.isStudent == 1">寄售</a-select-option>
              <a-select-option :value="2">学生</a-select-option>
              <a-select-option :value="3" :disabled="userInfo.isStudent == 1">社会合作方</a-select-option>
            </a-select>
          </div>
          <div class="li"> 注册时间：{{ userInfo.createTime }} </div>
        </div>
      </div>
      <div class="btn">
        <a-button type="primary" @click="save"> 保存</a-button>
      </div>
    </div>
    <div class="table">
      <div class="menu">
        <div v-for="(item, index) in menuList" :key="index" :class="[selectIndex === index ? 'select' : '', 'item']" @click="handleMenuSelect(index)">
          {{ item.lable }}
        </div>
      </div>
      <div>
        <BasicTable @register="registerTable" v-if="selectIndex == 0">
          <template #state="{ record }">
            <div>
              {{ record.state == 2 ? '待审核' : record.state == 3 ? '失效' : record.state == 4 ? '交易中' : record.state == 5 ? '已完成' : '--' }}
            </div>
          </template>
          <template #buyPrice="{ record }">
            <div> 回收价：{{ record.buyPrice }} </div>
          </template>
        </BasicTable>
        <BasicTable @register="registerTable2" v-if="selectIndex == 1">
          <!-- <template #statea="{ record }">
            <div>
              {{
                record.isStudent === 0
                  ? '认证不通过'
                  : record.isStudent === 1
                    ? '已认证'
                    : record.isStudent === 2
                      ? '待审核'
                      : record.isStudent === 3
                        ? '未认证'
                        : ''
              }}
            </div>
          </template> -->
        </BasicTable>
        <BasicTable @register="registerTable3" v-if="selectIndex == 2">
          <template #amount="{ record }">
            <div> {{ record.type === 1 ? '+' : '-' }}{{ record.amount }} </div>
          </template>
          <template #type="{ record }">
            <div>
              {{ record.isWithdraw === 1 ? '提现' : '订单变动' }}
            </div>
          </template>
          <template #tableTitle>
            <a-button type="primary" @click="rewardDeduction" preIcon="ant-design:plus-outlined"> 奖励扣款</a-button>
          </template>
        </BasicTable>
      </div>
    </div>
    <a-modal v-model:visible="visible" title="奖励/扣款" @ok="handleOk">
      <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-form-item :name="['user', 'nickName']" label="用户昵称：">
          <a-input v-model:value="formState.user.nickName" :disabled="true" />
        </a-form-item>
        <a-form-item :name="['user', 'userId']" label="userId">
          <a-input v-model:value="formState.user.userId" :disabled="true" />
        </a-form-item>
        <a-form-item :name="['user', 'amount']" label="奖励/扣款金额：">
          <a-input v-model:value="formState.user.amount" type="number" />
        </a-form-item>
        <a-form-item
          :name="['user', 'remark']"
          label="奖励/扣款备注：
"
        >
          <a-textarea v-model:value="formState.user.remark" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" name="card-memberDetail" setup>
  import { ref, reactive } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columnsA, columnsB, columnsC, searchFormSchema } from './MemberDetail.data';
  import { Image } from 'ant-design-vue';
  import { getImportUrl, getExportUrl, getUserInfo, order, balance, guanxi, edit, walletChange } from './MemberDetail.api';
  import { useRoute } from 'vue-router';
  const route = useRoute();
  const queryParam = reactive<any>({});
  const selectIndex = ref<number>(0);
  const visible = ref<boolean>(false);
  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      title: '',
      api: order,
      columns: columnsA,
      canResize: false,
      showActionColumn: false, //隐藏操作列
      formConfig: {
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      beforeFetch: (params) => {
        params.userId = route.query.id;
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: 'app用户',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

  const formState = reactive({
    user: {
      nickName: '',
      amount: '',
      remark: '',
      userId: '',
    },
  });

  async function save() {
    let res = await edit(
      {
        id: userInfo.value.id,
        isStudent: userInfo.value.isStudent,
        identity: userInfo.value.identity,
        appRole: userInfo.value.appRole,
      },
      handleSuccess()
    );
    console.log('res', res);
  }

  const [registerTable, { reload }] = tableContext;

  const { tableContext: tableContext2 } = useListPage({
    tableProps: {
      title: '',
      api: guanxi,
      columns: columnsB,
      canResize: false,
      showActionColumn: false, //隐藏操作列
      formConfig: {
        //labelWidth: 120,
        schemas: [],
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      beforeFetch: (params) => {
        params.userId = route.query.id;
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: 'app用户',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

  const [registerTable2, { reload: reload2 }] = tableContext2;

  const { tableContext: tableContext3 } = useListPage({
    tableProps: {
      title: '',
      api: balance,
      columns: columnsC,
      canResize: false,
      showActionColumn: false, //隐藏操作列
      formConfig: {
        //labelWidth: 120,
        schemas: [],
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      beforeFetch: (params) => {
        params.userId = route.query.id;
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: 'app用户',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

  const [registerTable3, { reload: reload3 }] = tableContext3;

  const handleMenuSelect = (index: number) => {
    selectIndex.value = index;
  };
  interface UserInfo {
    nickName: string;
    phone: any;
    id: any;
    amount: any;
    withdraw: any;
    isStudent: any;
    inviteTime: any;
    identity: any;
    createTime: any;
    appRole: any;
  }
  const userInfo = ref<UserInfo | null>(null);
  const menuList = [
    {
      lable: '订单列表',
      index: 0,
    },
    {
      lable: '关系链',
      index: 1,
    },
    {
      lable: '钱包余额',
      index: 2,
    },
  ];
  const id = route.query.id;
  getUserInfo({ id: id }).then((res) => {
    console.log('res', res);
    formState.user.nickName = res.nickName;
    formState.user.userId = id;
    console.log('formState', formState);

    userInfo.value = res;
  });

  /**
   * 成功回调
   */
  function handleSuccess() {
    reload();
    reload2();
    reload3();
  }

  function rewardDeduction() {
    visible.value = true;
  }
  async function handleOk() {
    let res = await walletChange(formState.user);
    console.log('res', res);
    console.log('formState', formState.user);
    reload3();
    visible.value = false;
  }
</script>

<style lang="less" scoped>
  :deep(.ant-picker),
  :deep(.ant-input-number) {
    width: 100%;
  }
  .body {
    padding: 20px;
    box-sizing: border-box;
    .user_info {
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      .info {
        width: 100%;
        display: flex;
        align-items: center;
        .title {
          font-size: 18px;
          margin-right: 30px;
        }
        .aravat_box {
          width: 120px;
          height: 120px;
          border-radius: 60px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          .aravat {
          }
        }
      }
      .detail {
        font-size: 16px;
        margin-top: 20px;
        .ul {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .li {
            width: 20%;
            margin: 10px 0;
          }
        }
      }
    }
  }
  .table {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    .menu {
      display: flex;
      align-items: center;
      .select {
        color: rgb(64, 158, 255);
        border-bottom: rgb(64, 158, 255) 2px solid;
      }
      .item {
        cursor: pointer;
        caret-color: transparent;
        font-size: 16px;
        margin: 20px;
      }
    }
  }
  .btn {
    width: 100%;
    text-align: right;
  }
</style>
